import { parseHTML } from './parseAst';
import { generate } from './generate';

export function compileToFunction(el) {
  let ast = parseHTML(el);
  // console.log('ast', ast);

  let renderCode = generate(ast);
  // _c(
  //   'div',
  //   { id: 'app', class: 'appClass', style: { color: ' red', ' font-size': ' 15px' } },
  //   _v('3333'),
  //   _c('h1', { id: 'hhhh' }, _v(_s(message) + 'hello' + _s(age) + 'world!!!'), _c('span', null, '123333')),
  //   _c('h2', null, _v(_s(age)))
  // );

  // 模板引擎的实现原理：with + new Function
  renderCode = `with(this){ return ${renderCode}}`;
  let render = new Function(renderCode);
  // console.log(render.toString());
  // function anonymous() {
  //   with (this) {
  //     return _c(
  //       'div',
  //       { id: 'app', class: 'appClass', style: { color: ' red', ' font-size': ' 15px' } },
  //       '3333',
  //       _c('h1', { id: 'hhhh' }, _v(_s(message) + 'hello' + _s(age) + 'world!!!'), _c('span', null, '123333')),
  //       _c('h2', null, _v(_s(age)))
  //     );
  //   }
  // }

  return render;
}
